/*
 * @Author: 梦付千秋星垂野 465943794@qq.com
 * @Date: 2022-10-18 16:36:27
 * @LastEditors: 梦付千秋星垂野 465943794@qq.com
 * @LastEditTime: 2022-10-20 10:04:14
 * @FilePath: /practise--chat-app-react-nodejs/pubilc/src/components/ChatInput.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState } from "react";
import { BsEmojiSmileFill } from "react-icons/bs";
import { IoMdSend } from "react-icons/io";
import styled from "styled-components";
import Picker from "emoji-picker-react";
export default function ChatInput({ handleSendMsg }) {
    const [msg, setMsg] = useState("");
    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
    const handleEmojiPickerhideShow = () => {
        setShowEmojiPicker(!showEmojiPicker);
    };

    const handleEmojiClick = (emojiObject,event) => {
        let message = msg;
        message += emojiObject.emoji;
        console.log(emojiObject)
        setMsg(message);
    };

    const sendChat = (event) => {
        event.preventDefault();
        if (msg.length > 0) {
        handleSendMsg(msg);
        setMsg("");
        }
    };
    return (
        <Container>
        <div className="button-container">
            <div className="emoji">
            <BsEmojiSmileFill onClick={handleEmojiPickerhideShow} />
            {showEmojiPicker && <Picker onEmojiClick={handleEmojiClick} />}
            </div>
        </div>
        <form className="input-container" onSubmit={(event) => sendChat(event)}>
            <input
            type="text"
            placeholder="type your message here"
            onChange={(e) => setMsg(e.target.value)}
            value={msg}
            />
            <button type="submit">
            <IoMdSend />
            </button>
        </form>
        </Container>
    );
}

const Container = styled.div`
  display: grid;
  align-items: center;
  grid-template-columns: 5% 95%;
  background-color: #080420;
  padding: 0 2rem;
  @media screen and (min-width: 720px) and (max-width: 1080px) {
    padding: 0 1rem;
    gap: 1rem;
  }
  .button-container {
    display: flex;
    align-items: center;
    color: white;
    gap: 1rem;
    .emoji {
      position: relative;
      svg {
        font-size: 1.5rem;
        color: #ffff00c8;
        cursor: pointer;
      }
      .EmojiPickerReact{
        position: absolute;
        top: -500px;
        // background-color: #080420;
        // box-shadow: 0 5px 10px #9a86f3;
        // // border-color: #9a86f3;
        // --epr-bg-color:rgba(255, 255, 255, 0.7);
        // --epr-category-label-bg-color:rgba(255, 255, 255, 0.7);
        // .emoji-scroll-wrapper::-webkit-scrollbar {
        //   background-color: #080420;
        //   width: 5px;
        //   &-thumb {
        //     background-color: #9a86f3;
        //   }
        // }
        // .emoji-categories {
        //   button {
        //     filter: contrast(0);
        //   }
        // }
        // .EmojiSearch {
        //   background-color: transparent;
        //   border-color: #9a86f3;
        // }
        // .emoji-group:before {
        //   background-color: #080420;
        // }
      }
    }
  }
  .input-container {
    width: 100%;
    border-radius: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    background-color: #ffffff34;
    input {
      width: 90%;
      height: 60%;
      background-color: transparent;
      color: white;
      border: none;
      padding-left: 1rem;
      font-size: 1.2rem;

      &::selection {
        background-color: #9a86f3;
      }
      &:focus {
        outline: none;
      }
    }
    button {
      padding: 0.3rem 2rem;
      border-radius: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #9a86f3;
      border: none;
      @media screen and (min-width: 720px) and (max-width: 1080px) {
        padding: 0.3rem 1rem;
        svg {
          font-size: 1rem;
        }
      }
      svg {
        font-size: 2rem;
        color: white;
      }
    }
  }
`;
